8f:I[903690,["/chat-static/_next/static/chunks/0rt9odizr-jjb.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/36mpl_ygnfrn4.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/035w0wg2gxyor.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/0mi4y0w4pl0wu.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/43tm4sfuv-bre.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/14v7b-gixg9wk.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3xrj_hsp3fmgn.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1xdkpdc84l3q9.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2q7fs4m_uamv5.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/34jb4285p3p7e.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/07ek7rah7ke6w.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1jfrn9u40szv6.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3c4glqozsbxzk.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2kohmem-6ngwr.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3u--blmtci52c.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3bbsz6yb3u_4l.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/0g1vo6dajj3ur.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/0w7-fmksgb7nb.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3wi82p7qvjxfb.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1z4v54v0ctlnj.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2sjnzs7s258hc.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/36289i9wjcw91.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/0tk-9_pd_t87z.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1d5cm3g8z-wmq.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1q89dw-c_44o_.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2cjw3-k1vrcs3.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/29z3h6t0tfllm.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/127p2zuv79gkk.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2zak2d_u5iko3.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1ywag30-9ka99.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3qg3qz7pjnemd.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2gumkeigv5cf6.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1frdulrl5q9n5.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/32f_k_-32djl6.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1lq145b3vyg4-.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/18z38_es0jdvv.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2vk7zslp0se6a.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2e_g7o1snt_96.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2_ncwtp5_4p4i.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3xhe4ju57na2c.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/112s1d0t63y17.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2u859s2mzgnxb.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u"],"ExplicitChatIdProvider"] 90:I[838238,["/chat-static/_next/static/chunks/0rt9odizr-jjb.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/36mpl_ygnfrn4.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/035w0wg2gxyor.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/0mi4y0w4pl0wu.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/43tm4sfuv-bre.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/14v7b-gixg9wk.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3xrj_hsp3fmgn.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1xdkpdc84l3q9.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2q7fs4m_uamv5.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/34jb4285p3p7e.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/07ek7rah7ke6w.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1jfrn9u40szv6.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3c4glqozsbxzk.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2kohmem-6ngwr.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3u--blmtci52c.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3bbsz6yb3u_4l.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/0g1vo6dajj3ur.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/0w7-fmksgb7nb.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3wi82p7qvjxfb.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1z4v54v0ctlnj.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2sjnzs7s258hc.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/36289i9wjcw91.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/0tk-9_pd_t87z.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1d5cm3g8z-wmq.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1q89dw-c_44o_.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2cjw3-k1vrcs3.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/29z3h6t0tfllm.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/127p2zuv79gkk.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2zak2d_u5iko3.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1ywag30-9ka99.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3qg3qz7pjnemd.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2gumkeigv5cf6.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1frdulrl5q9n5.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/32f_k_-32djl6.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/1lq145b3vyg4-.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/18z38_es0jdvv.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2vk7zslp0se6a.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2e_g7o1snt_96.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2_ncwtp5_4p4i.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/3xhe4ju57na2c.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/112s1d0t63y17.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u","/chat-static/_next/static/chunks/2u859s2mzgnxb.js?dpl=dpl_C9sepNS4xdgQivsvR9tkSmegKY4u"],"SWRDataProvider"] 91:T165e,[V0_FILE]typescriptreact:file="components/chat-form.tsx" "use client" import { cn } from "@/lib/utils" import { useChat } from "ai/react" import { ArrowUpIcon } from "lucide-react" import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip" import { AutoResizeTextarea } from "@/components/autoresize-textarea" export function ChatForm({ className, ...props }: React.ComponentProps<"form">) { const { messages, input, setInput, append } = useChat({ api: "/api/chat", }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() void append({ content: input, role: "user" }) setInput("") } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSubmit(e as unknown as React.FormEvent) } } const header = (

Basic AI Chatbot Template

This is an AI chatbot app template built with Next.js, the{" "} Vercel AI SDK, and Vercel KV.

Connect an API Key from your provider and send a message to get started.

) const messageList = (

{messages.map((message, index) => (

{message.content}

))}

) return (

{messages.length ? messageList : header}

) } [V0_FILE]typescriptreact:file="components/autoresize-textarea.tsx" "use client" import { cn } from "@/lib/utils" import React, { useRef, useEffect, type TextareaHTMLAttributes } from "react" interface AutoResizeTextareaProps extends Omit, "value" | "onChange"> { value: string onChange: (value: string) => void } export function AutoResizeTextarea({ className, value, onChange, ...props }: AutoResizeTextareaProps) { const textareaRef = useRef(null) const resizeTextarea = () => { const textarea = textareaRef.current if (textarea) { textarea.style.height = "auto" textarea.style.height = `${textarea.scrollHeight}px` } } useEffect(() => { resizeTextarea() }, [value]) return (

{
        onChange(e.target.value)
        resizeTextarea()
      }}
      className={cn("resize-none min-h-4 max-h-80", className)}
    />
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" entry="true"
import { ChatForm } from "@/components/chat-form"

export default function Page() {
  return <ChatForm />
}

[V0_FILE]typescriptreact:file="app/layout.tsx" entry="true"
import { cn } from "@/lib/utils"
import { TooltipProvider } from "@/components/ui/tooltip"
import { Inter } from "next/font/google"
import type { ReactNode } from "react"

const inter = Inter({ subsets: ["latin"] })

export const metadata = {
  title: "OpenAI and AI SDK Chatbot",
  description: "A simple chatbot built using the AI SDK and gpt-4o-mini.",
}

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body className={cn("flex min-h-svh flex-col antialiased", inter.className)}>
        <TooltipProvider delayDuration={0}>{children}</TooltipProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="app/api/chat/route.ts" entry="true"
import { type CoreMessage, streamText } from "ai"
import { openai } from "@ai-sdk/openai"

export async function POST(req: Request) {
  const { messages }: { messages: CoreMessage[] } = await req.json()

const result = streamText({
    model: openai("gpt-4o-mini"),
    system: "You are a helpful assistant.",
    messages,
  })

return result.toDataStreamResponse()
}
85:["$","$L8f",null,{"chatId":"nhvl8UM4OpA","children":["$","$L90",null,{"data":{"@\"active-block\",\"nhvl8UM4OpA\",":{"id":"b_BtIH0wVe39T","messageId":"HrrMJB7PA7UCzKpuKdolccYsa6RVYMUU","source":"$91","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"OpenAI and AI SDK Chatbot","type":"code-project","project":"OpenAI and AI SDK Chatbot"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"nhvl8UM4OpA\",":false,"":null},"children":"$L92"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from shadcn

More Templates Like This